<template>
  <div>
    <div class="weui_tab">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#fff"
        text-color="#303133"
        active-text-color="#16b0ff">
        <div class="weui_navbar">
          <el-menu-item index="1" class="weui_navbar_item " @click="showRun">正在进行</el-menu-item>
          <el-menu-item index="2" class="weui_navbar_item " @click="showFinished">已完成</el-menu-item>
        </div>
      </el-menu>
    </div>
    <run-task v-if="Run" :task="list" class="componentsMargin"></run-task>
    <finished-task :task="list" class="componentsMargin" v-if="Finished"></finished-task>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import axios from 'axios'
import RunTask from './components/runTask'
import FinishedTask from './components/finishedTask'
export default {
  name: 'index',
  components: {
    RunTask,
    FinishedTask
  },
  data () {
    return {
      list: [],
      activeIndex: '1',
      Run: '',
      Finished: ''
    }
  },
  mounted: function () {
    this.judge()
    this.Run = true
    let level = parseInt(Cookies.get('level'))
    if (level === this.PI) this.getTaskManager()
    else if (level === this.PR) {
      this.getTaskManager()
      this.getTaskLeader()
    } else if (level === this.assistant) this.getTaskAll()
    else this.getTaskMember()
  },
  methods: {
    getTaskAll () {
      axios.get(this.url + '/module/all')
        .then(this.getTaskSucc)
    },
    getTaskManager () {
      axios.get(this.url + '/module/manager/' + Cookies.get('id'))
        .then(this.getTaskSucc)
    },
    getTaskMember () {
      axios.get(this.url + '/module/member/' + Cookies.get('id'))
        .then(this.getTaskSucc)
    },
    getTaskLeader () {
      axios.get(this.url + '/module/leader/' + Cookies.get('id'))
        .then(this.getTaskSucc)
    },
    getTaskSucc (res) {
      if (res.status === 200) {
        let list = this.list.concat(res.data)
        const arr = new Map()
        this.list = list.filter((list) => !arr.has(list.id) && arr.set(list.id, 1))
      }
    },
    showRun () {
      this.Run = true
      this.Finished = false
    },
    showFinished () {
      this.Finished = false
      this.Finished = true
      this.Run = false
    },
    showNew () {
      this.Run = false
      this.Finished = false
    },
    judge () {
      if (!Cookies.get('id')) {
        this.$router.push('/loginError')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .tabColor
    color #16b0ff
  .componentsMargin
    margin-top 55.2px
</style>
